import Vue from 'vue'
import VueRouter from 'vue-router';
import store from '@/Store/index'
Vue.use(VueRouter);

//1、先把VueRouter原型对象的push方法，保存一份
let OriginPush = VueRouter.prototype.push;
let OriginReplace =VueRouter.prototype.replace;
// 2、重写push | replace方法
//第一个参数：告知原来的push，跳转的目标位置和传递了那些参数
// VueRouter.prototype.push = function(location,resolve,reject){
//     if(resolve){
//             //call上下文（改变this指向）   把this的指向改变为调用者
//         OriginPush.call(this,location,resolve,reject);  
            
//     }else{
//         OriginPush.call(this,location,() => {},() => {})
//     }
// }
// 重写push | replace方法
VueRouter.prototype.push = function push(location){
    return  OriginPush.call(this,location).catch( (error) => error );
}
VueRouter.prototype.replace = function replace(location){
    return OriginReplace.call(this,location).catch( (error) => error )
}

let router = new VueRouter({
    routes:[
        {
            path:'/myorder',
            component:() => import('@/pages/myOrder'),//路由懒加载
            meta:{
                show:true,  //如果为真则显示footer组件
            },
            children:[  //二级路由
                {
                    path:'grouporder',
                    component:() => import('@/pages/myOrder/groupOrder'),
                    meta:{
                        show:true,
                    },
                },
                {
                    path:'MYOrder',
                    component:() => import('@/pages/myOrder/myOrder'),
                    meta:{
                        show:true,
                    },
                },{
                    path:'/myorder',
                    //二级路由重定向
                    redirect:'/myorder/MYOrder'
                }
            ]
        },
        {
            path:'/paySuccess',
            component:() => import('@/pages/paySuccess'),
            meta:{
                show:true,
            },
            // 前置路由独享守卫
            beforeEnter: (to, from, next) => {
                // 如果是点击了支付 进入paySucees 则可以进行下一步 否则返回原来的路由路径
                if (from.meta.fleg) {
                    from.meta.fleg = false
                    if (from.path=='/pay' && to.path=='/paySuccess') {
                        next()
                    }
                }else{
                    next(from.path)
                }
            
            }
        },
        {
            path:'/pay',
            component:() => import('@/pages/pay'),
            meta:{
                show:true,
                fleg:false
            },
            beforeEnter: (to, from, next) => {
                if (from.meta.fleg) {
                    from.meta.fleg = false
                    if (from.path=='/trade' && to.path=='/pay') {
                        next()
                    }
                }else{
                    next(from.path)
                }
            }
        },
        {
            path:'/trade',
            component:() => import('@/pages/trade'),
            meta:{
                show:true,
                fleg:false
            },
            beforeEnter: (to, from, next) => {
                if (from.meta.fleg) {
                    from.meta.fleg = false
                    if (from.path=='/Cart' && to.path=='/trade') {
                        next()
                    }
                }else{
                    // 如果在路由为addCart时  点击重新刷新则进入Home页面
                    if (to.path=='/trade' && from.name==null) {
                        next(()=>{})
                        // next('/Home')
                    }else{
                        next(from.path)
                    }
                }
            }
        },
        {
            name:'cart',
            path:"/Cart",
            component:() => import('@/pages/Cart'),
            meta:{
                show:true,
                fleg:false
            },
        },
        {
            name:'addCart',
            path:"/addCart",
            component:()=> import('@/pages/addCart'),
            meta:{
                show:true,
                fleg:false
            },
            beforeEnter: (to, from, next) => {
                // 如果点击了提交则进入下一个 
                if(from.meta.fleg){
                    from.meta.fleg = false
                    if (from.name=='detail' && to.path=='/addCart') {
                        next();
                    }
                }else{
                    // 如果在路由为addCart时  点击重新刷新则进入Home页面
                    if (to.path=='/addCart' && from.name==null) {
                        next(()=>{})
                    }else{
                        next(from.path)
                    }
                }  
            }
        },
        {
            name:'detail',
            path:"/detail/:skuid?",
            component:()=> import('@/pages/Detail'),
            meta:{
                fleg:false,
                show:true,
            },
        },
        {
            name:'search',
            path:"/Search/:keyword?",    //加入？表示可传可不传
            // component:Search,
            component:() => import('@/pages/Search/Search.vue'),
            meta:{
                show:true,
            },
            // 第一种写法： props值为布尔值，如果为true，则把路由收到所有的params参数通过props传给组件
            // props:true   //传入

            // 第二种写法： prop值为对象，该对象中所有的key-value的组合最终到会通过props传给组件
            // props:{
            //     a:12,
            //     b:23
            // }

            // 第三种写法:  porps值为函数，该函数返回的对象中每一组key-value都会通过props传给组件

            // props:($route)=>{  //$route（变量）接收route的实例  可以获取query 与 parms数据
            //     return {
            //         Serch_Text:$route.params.Serch_Text,     //获取route的params数据
            //         test:$route.query.test              //获取router的query数据
            //     }
            // }
            // props($router){
            //     return{
            //         Serch_Text:$router.params.Serch_Text,
            //     }
            // }
        },
        {
            path:"/Register",
            // component:Register,
            component:() => import('@/pages/Register/Register.vue'),
            meta:{
                show:true,
            }
        },
        {
            name:'home',
            path:"/Home",
            // component:Home,
            component:() => import('@/pages/Home/Home.vue'),
            meta:{
                show:true,
            }
        },{
            path:"/Login",
            name:'login',
            component:() => import('@/pages/Login/Login.vue'),
            // component:Login,
            meta:{
                show:true,
            }
        },{
            path:"/",
            redirect:'Home'
        }
    ],
    // 路由的滚动行为
    scrollBehavior () {
        return {y: 0 }
      },
    mode:'history'
})

// 全局前置守卫
router.beforeEach(async (to, from, next)=>{
    //获取session储存中的TOKEN数据
  let token = sessionStorage.getItem('TOKEN')
    //获取vuex中的user     infO里的name数据
  let name = store.state.user.info.name
  //如果token存在说明用户已登录。
  if (token) {
      //如果已登录  则不能进入登录与注册页面
    if (to.name=="login" || to.path=='/Register') {
        // 跳回到home路由
      next('/Home')
    }else{
        //如果name数据存在  说明已经显示了用户名
      if (name) {
          //无条件放行
        next() 
      }else{
        // 如果name不存在（重新刷新页面情况 vuex会重新更新数据 ）  则需要重新发请求
        try {
            // sessionStorage.removeItem('TOKEN')
            await  store.dispatch('user/getuserinfo')
            next()
        } catch (error) {
            // 如果请求错误  则说明token过期
            next('/Login')
        }
      }
    }
  }else{   //如果token不存在

    // 进入了next 则不会执行下面语句
    
    if(to.path=='/addCart'){
        // 如果来自的是detail 需要去的是addCart  则需要等于用户 
        if (from.name=='detail' && to.path=='/addCart') {
            // 保存用户之前的路由数据 query参数
            next('/Login?redirect='+from.path)
        }else{
            next(from.path) 
        }
    }
    if (to.path=='/Cart') {
         // 保存用户之前的路由数据 query参数
        next('/Login?redirect='+to.path)
    }
    if (to.path=='/myorder/MYOrder') {
         // 保存用户之前的路由数据 query参数
        next('/Login?redirect='+to.path)
    }
    // 如果需要去路由为 pay paySuccess trade 则跳转到登录
    if (to.path=='/pay' || to.path=='/paySuccess' || to.path=='/trade') {
        next('/Login') 
    }
    next()
  }
})

export default router

